
<!DOCTYPE html>
  <html lang="zh-CN">
  
  <head>
      {% include 'header_content' %}
      {{  'public.js' | public_assets_dir_content  }}
      <link rel="stylesheet" type="text/css" href="{{ 'theme.css' | public_asset_abs_dir_url }}">
      <link rel="stylesheet" type="text/css" href="{{ 'account.css' | public_asset_abs_dir_url }}">
      <link rel="stylesheet" type="text/css" href="{{ 'vendor.css' | public_asset_abs_dir_url }}">
      <style>
        .popup-product-warp .product-details .product-btns .secondary_btn,.popup-product-warp .product-details .product-btns .main_btn {
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .popup-product-warp .product-price{
          font-size: 1.4285714286rem;
          line-height: 1.7142857143rem;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          justify-content: center;
        }
          @media screen and (max-width: 500px) {
          .popup-product-warp .product-details .cell-item{
            margin-top: 10px;
          }
          .popup-product-warp{
            padding: 40px 20px;
          }
          .popup-product-warp .product-details .cell-item-btns{
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            padding:  20px;
            border-top: 1px solid #E8E8E1;
            background-color: #fff;
            margin: 0;
          }
          .popup-product-warp .product-sku{
            padding-bottom: 137px;
          }
          .popup-product-warp .product-details .cell-item,.popup-product-warp .product-sku-values{
            {%- comment -%} justify-content: start; {%- endcomment -%}
          }
      
          .popup-product-warp .product-details .product-calculator{
            border: 1px solid #999;
          }
          .popup-product-warp .product-details .product-calculator .product-calculator-value{
            margin: 0;
          }
          .popup-product-warp .product-details .product-btns{
            flex-direction: column;
          }
          .popup-product-warp .product-details .product-btns .secondary_btn{
            margin-top: 0;
          }
          .popup-product-warp .product-details .product-btns .main_btn{
            margin-top: 20px;
          }
          .popup-product-warp .product-details .product-title div{
            font-size: 16px !important;
            {%- comment -%} text-align: left; {%- endcomment -%}
            
          }
          .popup-product-warp .product-details .product-title{
            margin-bottom: 10px;
          }
          .popup-product-warp .product-details .product-title::after{
            display: none;
          }
          .popup-product-warp .icon-claer{
            top: 10px;
            right: 10px;
          }
          .quickview-warp-hide{
           display: none !important;  
          }
          #preview-sku-option.product_flex_left .line-clamp2 {
            text-align: left;
          }
          #preview-sku-option .quickview-warp-show {
            display: block !important;
            margin-top: 20px;
          }
          #preview-sku-option .quickview-warp-show .product-title {
            padding-bottom: 10px;
          }
  
  
          {% comment %} 移动端商品图 {% endcomment %}
  
          .popup-product-warp .mobile_product_preview {
            display: flex !important;
            justify-content: center;
          }
        .popup-product-warp .mobile_product_preview .swiper-container {
          height: 100px;
          width: 100px;
          margin: 0;
        }
        .popup-product-warp .mobile_product_preview .swiper-container .product_preview-video-container{
          height: 100px;
        }
        .popup-product-warp .mobile_product_preview .swiper-container .product_preview-video-container .video-product_preview-box{
          height: 100%;
        }
        .popup-product-warp .mobile_product_preview .swiper-container .product_preview-video-container video{
          object-fit: fill;
        }
        .popup-product-warp .mobile_product_preview .product-swiper-small,
        .popup-product-warp .mobile_product_preview .product-preview-small{
          display: none !important;
        }
      }
      .popup-product-warp .mobile_product_preview{
        display: none;
      }
      .supplier_name{
        font-size: 14px;  
        color: #999999;
      }
      .supplier_name.product_flex_center{
        text-align: center;
      }
      
      
    </style>
    {% include product_option %}
    {% get_script_content route={template_route} scope=0 position=0 %}
</head>
{%- capture supplier_name -%}
  {% if theme_config.global.supplier_display_selection == '1' %}
    <div class="supplier_name {{theme_config.global.product_right_float}}">{{ theme_config.global.supplier_name }}</div>
  {% elsif theme_config.global.supplier_display_selection == '2' %}
    <div class="supplier_name {{theme_config.global.product_right_float}}">{{ product.vendor }}</div>
  {% endif %}
{%- endcapture -%}
<body>
<div class="popup-product-warp product_quick_detail" id="product_quick_detail">
  <svg class="icon-claer popup-claer" t="1634191042040" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3072" width="20" height="20">
    <path d="M571.008 511.936l313.088-311.04a42.688 42.688 0 0 0 0-58.816l-2.496-2.496a40.384 40.384 0 0 0-56.704 0l-313.088 313.6-313.088-311.04a40.384 40.384 0 0 0-56.704 0l-2.496 2.496a42.688 42.688 0 0 0 0 58.816l313.088 308.608-313.088 311.04a42.688 42.688 0 0 0 0 58.816l2.496 2.496a40.384 40.384 0 0 0 56.704 0l313.088-313.6 313.088 311.04a40.384 40.384 0 0 0 56.704 0l2.496-2.496a42.688 42.688 0 0 0 0-58.816z" fill="#1D1F21" p-id="3073">
    </path>
  </svg>
  {% if theme_config.global.product_quickview_type == "normal" %}
  <div class="product-swiper is-quickview-type">
    {%- assign productId = product.id | default: block_id  -%}
    {% include 'product_preview', previewImage:product.images , showSmall:true,productId: productId,blockId:productId %}
  </div>
  {% endif %}
  <div class="product-details {{theme_config.global.product_right_float}}" id="preview-sku-option">
    {% if theme_config.global.product_quickview_type == "normal" %}
    <div class="mobile_product_preview">
      {%- assign productId = product.id | default: block_id  -%}
      {%- assign productIdBlock = product.id | default: block_id | append: '_mobile'  -%}
      {% include 'product_preview', previewImage:product.images ,showSmall:true,productId: productId,blockId:productIdBlock %}
    </div>
    {% endif %}
    <div class="quickview-warp-hide {% if theme_config.global.product_title_model %}quickview-warp-show{% endif %}">
    {% if theme_config.global.product_quickview_type == "normal" %}
    <div class="product-title is-quickview-type control-product_detail-title">
      <div class="line-clamp2 general_title-color">{{product.title}}</div>
    </div>
   {%- if product.star -%}
    <div class="cell-item control-product_detail-comment_star">
      {% include 'comment_star', score:product.star %}
    </div>
   {%- endif -%}

    {% endif %}
    </div>
    <div class="product-sku">
      <div class="cell-item is-quickview-type control-product_detail-price_box" >
        <div class="product-price">
          <div class="product-price-number general_buying-color"></div>
          <div class="product-price-market general_original-color"></div>
          {%- if theme_config.global.product_discount_label_style_switch -%}
          <div class="product-price-discount"></div>
          {%- endif -%}
        </div>
       
      </div>
      {{ supplier_name }}
     
        {%- if product.virtual_sale_count -%}
          <div class="product-info-describe virtual_sale control-product_detail-virtual_sale">{{ product.virtual_sale_count | plus: product.sale_count }} {{lang.product.sold}}</div>
        {%- endif -%}
        <div class="sku-cell control-product_detail-sku_box"></div>
        <div class="plugin-product_detail-quantity_top" data-product-id="{{product.id}}"></div>
        {% if theme_config.global.product_quantity or theme_config.global.product_quantity  == nil %}
          <div class="control-product_detail-quantity_box">
          <div class="cell-item">
            <span class="product-sku-name">{{ lang.cart.list.quantity }}</span>
          </div>
          <div class="cell-item">
            <div class="product-calculator mo-quantity">
              <div class="product-calculator-handle" data-type='reduce'>
                        {% include icon_minus ,{width:'16',height:'16'} %}
              </div>
              <input class="product-calculator-value"  min="1" type="number" value="{{theme_config.global.product_quantity_number | default:1}}"/>
              <div class="product-calculator-handle" data-type='add'>
                        {% include icon_plus ,{width:'16',height:'16'} %}
              </div>
            </div>
          </div>
          </div>
        {% endif %}
        <div class="plugin-product_detail-buy_top"  data-product-id="{{product.id}}"></div>
        <div class="cell-item cell-item-btns control-product_detail-button">
          <div class="product-btns">
                <div class="mo-btn-disable mo-btn product-out-of-stock" style="{% if product.available == 1 %}display:none{% endif %}">{{ lang.product.out_of_stock }}</div>
                <div class="product-btns product-out-of-delete" style="display: none;">
                  <div class="mo-btn mo-btn-default mo-btn-disable mo-btn-plan mo-btn-max mo-btn-block" >{{lang.account.wishlist.product_offline}}</div>
                </div>
                {% assign product_shopping_btn = theme_config.global.product_shopping_btn | default :'show' %}
                {%- if product_shopping_btn != 'hide' -%}
                      <div class="product-btns product-cart-group" style="{% if product.available == 0 %}display:none{% endif %}">
                          {%- if product_shopping_btn == 'add' or product_shopping_btn == 'show'  -%}
                          <div class="secondary_btn" style="min-height:48px" data-type="cart">{{lang.product.add_to_cart}}</div>
                          {%- endif -%}
  
                          {% if product_shopping_btn == 'show'  %}
                          <div class="divider is-quickview-type"></div>
                          {% endif %}
  
                          {%- if product_shopping_btn == 'buy' or product_shopping_btn == 'show'  -%}
                          <div class="is-quickview-type main_btn" data-type="buy_now">{{lang.product.buy_it_now}}</div>
                          {%- endif -%}
                      </div>
                {%- endif -%}
          </div>
        </div>
        <div class="plugin-product_detail-buy_bottom"  data-product-id="{{product.id}}"></div>
        {% if theme_config.global.product_quickview_type == "normal" %}
        <div class="cell-item is-quickview-type quickview-warp-hide">
          <a stlye="text-decoration: underline;" class="cart-button cart-button-plan" href="javascript:;" id="view-detail" >{{lang.product.view_detail}}</a>
        </div>
        {% endif %}
        <div class="plugin-product_detail-buy_describe_bottom"  data-product-id="{{product.id}}"></div>
  
  
      </div>
    </div>
  </div>
  
  
  <script type="text/javascript">
  
  $(function(){
    const temp = $('#product_quick_detail');
    window.parent.window.quickViewLoad(temp.innerHeight());
    setTimeout(function () {
      window.parent.window.quickViewLoad(temp.innerHeight());
      $("html,body").css({"height":"100%","overflow-y":"auto"})
    },100)
    $('html,body').find('img[data-src]').each(function(){
        window.addLazyImages && window.addLazyImages($(this))
    })
    const productDetail = new shopProduct({
      product: _GET_C_SETTING_("product"),
      data_from:'{{ detail_data_from }}',
      productOptionType:'{{ theme_config.global.product_option_type |  default:"default" }}',
      ec_currency_code: '{{ base_currency.standard_code }}',
      id: temp.find("#preview-sku-option"),
      isMainProduct:true,
      block_id:"{{productId}}",
      {% if theme_config.global.product_quantity == true %}
      quantity:{{theme_config.global.product_quantity_number | default:1}},
      {% endif %}
    });
  
    temp.find("[data-type='cart']").click(function () {
        if (!productDetail.verifyOption("cart")) {
          return false;
        }
  
        var load = moi.nodeShowLoading(this, "mo-loading-black");
        productDetail.addCart(
          function () {
            load.close();
          },
          function (data) {
            if (!data.code) {
              window.parent.window.quickViewCart({...productDetail.params,cart:data.data});
            } else {
              return moi.alert({
                title: data.msg
              });
            }
          },
          false
        );
      });
    temp.find("[data-type='buy_now']").click(function () {
        if (!productDetail.verifyOption("buy")) {
          return false;
        }
  
        var load = moi.nodeShowLoading(this);
  
        productDetail.buynow(
          function () {
            load.close();
          },
          function (ret) {
            if (!ret.code) {
              window.parent.window.quickViewBuy(ret.data.checkout_url);
            } else {
              return moi.alert({
                title: ret.msg
              });
            }
          },
          false
        );
      });
  
    temp.find("#view-detail").click(function(){
      window.parent.window.quickViewDetail('/products/{{product.handle}}');
    })
    
    temp.find(".popup-claer").click(function(){
      window.parent.window.quickViewClose();
    })
    moi.quantity({
      dom: temp.find(".mo-quantity"),
      change(val) {
        productDetail.setSelectedVal({ quantity: val.value });
      }
    });
  
  })
  </script>
   {% get_script_content route={template_route} scope=0 position=1 %}
  </body>
  </html>
  